<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
      status-icon
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="客户：" prop="customerId">
            <el-select
              v-model="form.customerId"
              placeholder="请选择"
              style="width:530px;"
              size="mini"
              filterable
              default-first-option
              @change="customerChanged"
              :disabled="dialogObj.id != ''"
            >
              <el-option
                v-for="(data, index) in customerList"
                :key="index"
                :label="data.customerName"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="类型：" prop="applicationType">
            <el-select
              v-model="form.applicationType"
              placeholder="请选择"
              style="width:200px;"
              size="mini"
              :disabled="dialogObj.id != ''"
            >
              <el-option
                v-for="(data, index) in patentTypeList"
                :key="index"
                :label="data.value"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类号：" prop="classinfoNumber">
            <el-input
              v-model="form.classinfoNumber"
              style="width:200px;"
              size="mini"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="专利名：" prop="title">
            <el-input
              v-model="form.title"
              style="width:530px;"
              size="mini"
              maxlength="200"
              :disabled="dialogObj.id != ''"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专利申请号：" prop="applicationNumber">
            <el-input
              v-model="form.applicationNumber"
              style="width:200px;"
              size="mini"
              maxlength="50"
              :disabled="dialogObj.id != ''"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请日：" prop="applicationDatetime">
            <el-date-picker
              v-model="form.applicationDatetime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公开号：" prop="publicNumber">
            <el-input
              v-model="form.publicNumber"
              style="width:200px;"
              size="mini"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公开日：" prop="publicDatetime">
            <el-date-picker
              v-model="form.publicDatetime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="授权公告号：" prop="authorizeNoticeNumber">
            <el-input
              v-model="form.authorizeNoticeNumber"
              style="width:200px;"
              size="mini"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权公告日：" prop="authorizeNoticeDatetime">
            <el-date-picker
              v-model="form.authorizeNoticeDatetime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请人：" prop="applicant">
            <el-input
              v-model="form.applicant"
              style="width:200px;"
              size="mini"
              maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发明人：" prop="inventor">
            <el-input
              v-model="form.inventor"
              style="width:200px;"
              size="mini"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="申请人地址：" prop="applicantAddress">
            <el-input
              v-model="form.applicantAddress"
              style="width:530px;"
              size="mini"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="代理人：" prop="agent">
            <el-input
              v-model="form.agent"
              style="width:200px;"
              size="mini"
              maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理机构：" prop="agency">
            <el-input
              v-model="form.agency"
              style="width:200px;"
              size="mini"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="国家/省会：" prop="country">
            <el-input
              v-model="form.country"
              style="width:200px;"
              size="mini"
              maxlength="50"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="范畴分类：" prop="classification">
            <el-input
              v-model="form.classification"
              style="width:200px;"
              size="mini"
              maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row v-if="!isUpdate">
        <el-col :span="12">
          <el-form-item label="年费到期日：" prop="feeEndTime" v-if="!isUpdate">
            <el-date-picker
              v-model="form.feeEndTime"
              style="width:200px;"
              size="mini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="缴费金额(元)："
            prop="feeAmount"
            v-if="!isUpdate"
          >
            <el-input
              v-model="form.feeAmount"
              style="width:200px;"
              size="mini"
              maxlength="8"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="缴费说明：" prop="feeRemark" v-if="!isUpdate">
        <el-input
          v-model="form.feeRemark"
          style="width:530px;"
          size="mini"
        ></el-input>
      </el-form-item> -->
      <el-form-item
        label="简要说明："
        prop="description"
        v-if="form.applicationType === 3"
      >
        <el-input
          type="textarea"
          v-model="form.description"
          style="width:530px;"
          size="mini"
          maxlength="1000"
          show-word-limit
          resize="none"
          :autosize="{ minRows: 8 }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="摘要："
        prop="patentAbstract"
        v-if="form.applicationType != 3"
      >
        <el-input
          type="textarea"
          v-model="form.patentAbstract"
          style="width:530px;"
          size="mini"
          maxlength="1000"
          show-word-limit
          resize="none"
          :autosize="{ minRows: 8 }"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="主权利要求："
        prop="mainClaims"
        v-if="form.applicationType != 3"
      >
        <el-input
          type="textarea"
          v-model="form.mainClaims"
          style="width:530px;"
          size="mini"
          maxlength="5000"
          show-word-limit
          resize="none"
          :autosize="{ minRows: 10 }"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="图片：" prop="projectImage">
        <upload-picture
          :imageValue="form.projectImage"
          @handleSuccess="handleSuccess"
        >
        </upload-picture>
        <span style="color:red;font-size:12px">
          提示：只能上传JPG、JPEG、PNG 格式，且不超过5Mb
        </span>
      </el-form-item>
      <el-form-item label="专利Pdf文件：" prop="pdfUrl">
        <upload-pdf
          :imageValue="form.pdfUrl"
          @handlePdfSuccess="handlePdfSuccess"
        >
        </upload-pdf>
      </el-form-item>
      <el-form-item label="法律公告：" prop="legal">
        <legal-text :tableData="tableData" @handleTableDate="handleTableDate">
        </legal-text>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="!dialogObj.read">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
      <el-button
        type="primary"
        @click="subRPA"
        size="mini"
        v-if="loginName == 'admin'"
      >
        RPA更新
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import uploadPicture from "@c/uploadPicture";
import uploadPdf from "@c/uploadPdf";
import legalText from "@c/legalText";
import { _debounce } from "@u/debounce";
import { PATENTTYPELIST } from "@u/wordbook";
import { validatePatentNumber, validateEmpty } from "@u/validate";
// import timeFormat from "@u/timeFormat";
import {
  AddPatentManageApi,
  updatePatentManageApi,
  getCustomerListApi
} from "@s/api";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  components: {
    uploadPicture,
    uploadPdf,
    legalText
  },
  data() {
    return {
      agentStatus: true,
      isUpdate: false,
      loginName: "",
      tableData: [
        {
          legalDatetime: "",
          legalInfo: "",
          legalDesc: ""
        }
      ],
      form: {
        id: "",
        customerId: "",
        applicationType: "",
        title: "",
        applicationNumber: "",
        applicationDatetime: "",
        publicNumber: "",
        publicDatetime: "",
        authorizeNoticeNumber: "",
        authorizeNoticeDatetime: "",
        country: "",
        classinfoNumber: "",
        applicant: "",
        applicantAddress: "",
        inventor: "",
        agent: "",
        agency: "",
        classification: "",
        customerEndTime: "",
        feeEndTime: "",
        feeAmount: "",
        feeRemark: "",
        description: "",
        patentAbstract: "",
        mainClaims: "",
        projectImage: "",
        pdfUrl: "",
        rpaStatus: "",
        legalList: ""
      },
      patentTypeList: PATENTTYPELIST,
      customerList: [],
      rules: {
        customerId: [
          { required: true, trigger: "blur", message: "请选择客户名称" },
          { validator: validateEmpty }
        ],
        applicationType: [
          { required: true, trigger: "blur", message: "请选择专利类型" },
          { validator: validateEmpty }
        ],
        title: [{ required: true, trigger: "blur", message: "请输入专利名称" }],
        applicationNumber: [
          { required: true, trigger: "blur", message: "请输入申请号" },
          { validator: validatePatentNumber },
          { validator: validateEmpty }
        ],
        applicationDatetime: [
          { required: true, trigger: "blur", message: "请输入申请日" },
          { validator: validateEmpty }
        ]
      }
    };
  },
  methods: {
    // 客户信息
    getCustomerSelect() {
      getCustomerListApi().then(res => {
        this.customerList = res;
      });
    },
    selectBlur(e) {
      this.form.customerId = e.target.value;
    },
    initDialog() {
      this.loginName = JSON.parse(localStorage.getItem("mb_userInfo")).loginAccount;
      if (this.dialogObj.id) {
        this.form.id = this.dialogObj.id;
        this.form.customerId = this.dialogObj.form.customerId;
        this.form.applicationType = this.dialogObj.form.applicationType;
        this.form.title = this.dialogObj.form.title;
        this.form.applicationNumber = this.dialogObj.form.applicationNumber;
        this.form.applicationDatetime = this.dialogObj.form.applicationDatetime;
        this.form.publicNumber = this.dialogObj.form.publicNumber;
        this.form.publicDatetime = this.dialogObj.form.publicDatetime;
        this.form.authorizeNoticeNumber = this.dialogObj.form.authorizeNoticeNumber;
        this.form.authorizeNoticeDatetime = this.dialogObj.form.authorizeNoticeDatetime;
        this.form.country = this.dialogObj.form.country;
        this.form.classinfoNumber = this.dialogObj.form.classinfoNumber;
        this.form.applicant = this.dialogObj.form.applicant;
        this.form.applicantAddress = this.dialogObj.form.applicantAddress;
        this.form.inventor = this.dialogObj.form.inventor;
        this.form.agent = this.dialogObj.form.agent;
        this.form.agency = this.dialogObj.form.agency;
        this.form.classification = this.dialogObj.form.classification;
        // this.form.customerEndTime = this.dialogObj.form.customerEndTime;
        // this.form.feeEndTime = this.dialogObj.form.feeEndTime;
        // this.form.feeAmount = timeFormat.formatFloat(
        //   this.dialogObj.form.feeAmount / 100,
        //   2
        // );
        // this.form.feeRemark = this.dialogObj.form.feeRemark;
        this.form.description = this.dialogObj.form.description;
        this.form.patentAbstract = this.dialogObj.form.patentAbstract;
        this.form.mainClaims = this.dialogObj.form.mainClaims;
        this.form.projectImage = this.dialogObj.form.projectImage;
        this.form.pdfUrl = this.dialogObj.form.pdfUrl;
        if (
          this.dialogObj.form.legalList &&
          this.dialogObj.form.legalList.length > 0
        ) {
          this.tableData = JSON.parse(
            JSON.stringify(this.dialogObj.form.legalList)
          );
        } else {
          this.tableData = [];
        }
        this.form.rpaStatus = this.dialogObj.form.rpaStatus;
        this.isUpdate = true;
      } else {
        this.form.id = "";
        this.form.customerId = "";
        this.form.applicationType = "";
        this.form.title = "";
        this.form.applicationNumber = "";
        this.form.applicationDatetime = "";
        this.form.publicNumber = "";
        this.form.publicDatetime = "";
        this.form.authorizeNoticeNumber = "";
        this.form.authorizeNoticeDatetime = "";
        this.form.country = "";
        this.form.classinfoNumber = "";
        this.form.applicant = "";
        this.form.applicantAddress = "";
        this.form.inventor = "";
        this.form.agent = "";
        this.form.agency = "";
        this.form.classification = "";
        this.form.customerEndTime = "";
        this.form.feeEndTime = "";
        this.form.feeAmount = "";
        this.form.feeRemark = "";
        this.form.description = "";
        this.form.patentAbstract = "";
        this.form.mainClaims = "";
        this.form.projectImage = "";
        this.form.pdfUrl = "";
        this.form.rpaStatus = "0";
        this.tableData = [];
        this.isUpdate = false;
      }
    },
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogObj.id) {
            this.updateSub();
          } else {
            this.addSub();
          }
        }
      });
    }),
    subRPA() {
      this.form.legalList = this.tableData;
      this.form.rpaStatus = "1";
      let json = JSON.parse(JSON.stringify(this.form));
      updatePatentManageApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    updateSub() {
      this.form.legalList = this.tableData;
      let json = JSON.parse(JSON.stringify(this.form));
      updatePatentManageApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    customerChanged(val){
      console.log(val, 'val')
    },
    addSub() {
      this.form.legalList = this.tableData;
      // this.form.customerEndTime = this.form.feeEndTime;
      // this.form.feeAmount = timeFormat.yuanToCent(this.form.feeAmount);
      let json = JSON.parse(JSON.stringify(this.form));
      AddPatentManageApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "添加成功！"
        });
      });
    },
    selectIsAgentOption(val) {
      if (val == "0") {
        this.agentStatus = true;
      } else {
        this.agentStatus = false;
      }
    },
    handleTableDate() {},
    // 图片上传
    handleSuccess(val) {
      this.form.projectImage = val;
    },
    // Pdf上传
    handlePdfSuccess(val) {
      this.form.pdfUrl = val;
    }
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.getCustomerSelect();
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
